<template>
  <el-dialog show-close width="50%"
             :visible.sync="dialogVisible"
             :before-close="handleClose"
             append-to-body>
    <el-form class="login-form"
             status-icon
             :rules="rules"
             ref="updatePwdForm"
             :model="formData"
             label-width="0">
      <el-form-item prop="password">
        <el-input size="small"
                  :type="passwordType"
                  v-model="formData.password"
                  auto-complete="off"
                  :placeholder="$t('updatePwd.password')">
          <i class="el-icon-view el-input__icon"
             slot="suffix"
             @click="showPassword"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="rePassword">
        <el-input size="small"
                  :type="passwordType"
                  v-model="formData.rePassword"
                  auto-complete="off"
                  :placeholder="$t('updatePwd.rePassword')">
          <i class="el-icon-view el-input__icon"
             slot="suffix"
             @click="showPassword"></i>

        </el-input>
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitData">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {updateUserPassword} from "@/api/sys/userApi";

export default {
  name: "updateUserPwd",
  computed: {},
  data() {
    return {
      dialogVisible: false,
      formData: {},
      rules: {
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"}
        ],
        rePassword: [
          {required: true, message: "请输入确认密码", trigger: "blur"},
          {min: 6, message: "密码长度最少为6位", trigger: "blur"},
          {required: true, trigger: "blur", validator: this.validatePwd}
        ],
      },
      passwordType: "password"
    }
  },
  methods: {
    show(userId) {
      this.formData.userId = userId;
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.formData = {}
    },
    showPassword() {
      this.passwordType === "" ? (this.passwordType = "password") : (this.passwordType = "");
    },
    validatePwd(rule, value, callback) {
      if (this.formData.password !== value) {
        console.log("密码验证失败")
        callback(new Error("两次输入密码一致！"));
      } else {
        console.log("密码验证成功")
        callback();
      }
    },
    submitData() {
      this.$refs.updatePwdForm.validate((valid) => {
        if (!valid) return
        updateUserPassword(this.formData).then(res => {
          this.handleClose();
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
